<template>
  <div>
    <div>
      <el-row>
        <el-col :span="2.5">
          <el-button icon="el-icon-menu">
            黄金品类
          </el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button icon="el-icon-plus">
            <router-link to="/sale/addselectgoodsorder" tag="span">
              新增选货单
            </router-link>
          </el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button icon="el-icon-printer">
            导出
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-date-picker v-model="date" @blur="searchDate(date)" type="daterange" format="yyyy-MM-dd"
            value-format="timestamp" start-placeholder="开始日期" end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-col>
        <el-col :span="1">
          <div> &nbsp;</div>
        </el-col>
        <el-col :span="4">
          <el-input v-model="soAccountVo.nameId" placeholder="请输入选货单号"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>

        </el-col>
        <el-col :span="3">
          <el-button :circle="true" icon="el-icon-delete-solid"></el-button>
          <el-button :circle="true" icon="el-icon-refresh"></el-button>

        </el-col>
      </el-row>
    </div>
    <!-- 选货单列表 -->
    <div>
      <el-table :data="selectorderlist" style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="name" label="单号" width="180">
        </el-table-column>
        <el-table-column prop="customer" label="客户">
        </el-table-column>
        <el-table-column prop="dept" label="部门">
        </el-table-column>
        <el-table-column label="状态" prop="soStatus">

        </el-table-column>
        <el-table-column prop="condition" label="成色">
        </el-table-column>
        <el-table-column prop="weight" label="重量" width="150">

        </el-table-column>
        <el-table-column prop="amount" label="数量" width="150">
        </el-table-column>
        <el-table-column prop="createdTime" label="制单时间" width="200">

        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="detail(scope.row.soId,scope.row.soStatus,scope.$index)">详情
            </el-button>

            <el-button v-if="scope.row.soStatus =='编辑'" type="success" @click="check(scope.row.soId,'2','1')">确认
            </el-button>

            <el-button v-if="scope.row.soStatus =='已确认'" type="success" @click="goPacking(scope.row.soId)">去打包
            </el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div>
      共<font v-model="datanum">{{datanum}}</font>条数据
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          layout="prev, pager, next, jumper" :total="datanum" :page-size="pageSize">
        </el-pagination>
      </div>
    </div>


  </div>
</template>

<script>
  // 导入相依组件
  import soAcountApi from '@/api/sale/soAccount/soAccount'
  export default {
    components: {},

    data() {
      return {
        total: 10,
        date: "",
        OK: "true",
        value1: '',
        input: '',
        selectorderlist: [],
        //显示有多少数据
        datanum: null,
        //当前页数
        pageNum: 1,
        pageSize: 3,
        //查询对象封装nameid和时间
        soAccountVo: {
          nameId: "",
          preDate: "",
          nextDate: ""
        },
        SoAccountUpdateVo: {
          soAccountIds: []
        },


      }
    },
    methods: {


      // 打包
      goPacking(id) {
        this.$router.push({
          path: '/addPacking',
          query: {
            "soId": id
          }
        })
      },
      //更改状态
      check(s, soStatus, soOperateStatus) {
        this.SoAccountUpdateVo.soAccountIds.push(s);
        this.SoAccountUpdateVo.soStatus = soStatus;
        this.SoAccountUpdateVo.soOperateStatus = soOperateStatus;

        soAcountApi.updateSoAccountStatus(this.SoAccountUpdateVo).then(res => {
          this.$message.success(res.message)
        })
        this.findSoAccountAll()
      },
      //查看选货单详情
      detail(soId, status, index) {

        // console.log(soId);
        let currentPage = (this.pageNum - 1) * this.pageSize + index + 1
        console.log(currentPage);
        //跳转路由对应的path路径
        let max_page = (this.total / this.pageSize).toFixed(0);
        this.$router.push({
          path: 'selectgoodsdetail',
          query: {
            'total_page': this.datanum,
            "current_page": currentPage
          }
        })
      },

      handleSizeChange(val) {

        this.pageSize = val
        this.findSoAccountAll()
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.findSoAccountAll()
        console.log(`当前页: ${val}`)
      },

      //按输入选货编号查
      search() {
        this.findSoAccountAll()
      },

      searchDate(date) {

        this.soAccountVo.preDate = date[0];
        this.soAccountVo.nextDate = date[1];

      },
      // 查询所有的选货单信息 并分页
      findSoAccountAll() {
        soAcountApi.findSoAccountAll(
          this.pageNum,
          this.pageSize,
          this.soAccountVo).then(res => {
          this.selectorderlist = res.data.list;
          for (const index in this.selectorderlist) {

            this.selectorderlist[index].createdTime = this.selectorderlist[index].createdTime.substring(0, 19)
              .replace('T', ' ')

          }
          console.log(res);
          this.datanum = res.data.totalCount;

        })
      }
    },

    created() {
      this.findSoAccountAll()
    }
  }

</script>

<style scoped>
  .time {
    margin-top: 10px;
    margin-left: 900px;
  }

  .page {
    float: right;
  }

</style>
